<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">

    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <title>Presenter :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style</title>

    <link href="css/metro.css" rel="stylesheet">
    <link href="css/metro-icons.css" rel="stylesheet">
    <link href="css/metro-responsive.css" rel="stylesheet">
    <link href="css/metro-schemes.css" rel="stylesheet">

    <link href="css/docs.css" rel="stylesheet">

    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/metro.js"></script>
    <script src="js/docs.js"></script>
    <script src="js/prettify/run_prettify.js"></script>
    <script src="js/ga.js"></script>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

</head>
<body>
    <div class="container page-content">
        <h1><a href="index.html" class="nav-button transform"><span></span></a>&nbsp;Presenter</h1>

        @@adsense

        <div class="example" data-text="example">
            <div class="presenter" data-role="presenter" data-height="220" data-easing="swing">
                <div class="scene">
                    <div class="act bg-pink fg-white">
                        <img src="images/css-logo.png" class="actor" data-position="10,10" style="height: 200px">
                        <h1 class="actor" data-position="10,250">Developed with advice</h1>
                        <p class="actor" data-position="70,250">Metro UI CSS developed with the advice of Microsoft to build the user interface and include: general styles, grid, layouts, typography, 20+ components, 300+ built-in icons.</p>
                        <p class="actor" data-position="130,250">Metro UI CSS build with {LESS}. Metro UI CSS is open source and has MIT licensing model.</p>
                    </div>
                    <div class="act bg-steel fg-white">
                        <img src="images/bizspark_b_2.png" class="actor" data-position="10,10" style="height: 200px">
                        <h1 class="actor" data-position="10,270" >BizSpark Startup</h1>
                        <p class="actor" data-position="60,270" >Metro UI CSS is a BizSpark Startup. Microsoft BizSpark is a global program that helps software startups succeed by giving them access to software development tools, connecting them with key industry players, and providing marketing visibility.</p>
                        <p class="actor" data-position="120,270" >BizSpark provides free software, support, and visibility to help startups succeed. Join BizSpark and become part of a global community that has over 50,000 members in 100+ countries.</p>
                        <a class="actor button primary" data-position="170,270"  href="http://bizspark.com">Join the BizSpark Program now</a>
                    </div>
                    <div class="act bg-darkCyan fg-white">
                        <img src="images/phpstorm_7_eap.png" class="actor" data-position="10,10" style="height: 200px">
                        <h1 class="actor" data-position="10,300" >Thanks to JetBrains</h1>
                        <p class="actor" data-position="60,300" >Thanks to the company JetBrains for supporting the project in the form of a license for a great product PhpStorm.</p>
                        <a class="actor button success" data-position="130,300" href="http://www.jetbrains.com/phpstorm/">Get PhpStorm now!</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="example" data-text="code">
            <pre class="prettyprint linenums"><code>
                &lt;div class="presenter" data-role="presenter"&gt;
                    &lt;div class="scene"&gt;
                        &lt;div class="act"&gt;
                            &lt;element class="actor"&gt;&lt;/element&gt;
                            ...
                            &lt;element class="actor"&gt;&lt;/element&gt;
                        &lt;/div&gt;
                        ...
                        &lt;div class="act"&gt;
                            &lt;element class="actor"&gt;&lt;/element&gt;
                            ...
                            &lt;element class="actor"&gt;&lt;/element&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            </code></pre>
        </div>

        <p class="padding10 bg-grayLighter">
            <span class="tag alert">Important!</span> All actors must be have <span class="tag info">data-position</span> attribute with <strong>top</strong> and <strong>left</strong> position, separated by comma.
        </p>
        <div class="example" data-text="example">
            <pre class="prettyprint linenums"><code>
                &lt;div class="actor" data-position="10,20"&gt;...&lt;/div&gt;
            </code></pre>
        </div>

        <h3>Presenter Options</h3>
        <table class="table bordered border">
            <thead>
            <tr>
                <td>Parameter</td>
                <td>Data-*</td>
                <td>Type</td>
                <td>Default value</td>
                <td>Description</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>height</td>
                <td style="white-space: nowrap">data-height</td>
                <td>int</td>
                <td>200</td>
                <td>Presenter height</td>
            </tr>
            <tr>
                <td>width</td>
                <td style="white-space: nowrap">data-width</td>
                <td>int or string</td>
                <td>100%</td>
                <td>Presenter width</td>
            </tr>
            <tr>
                <td>effect</td>
                <td style="white-space: nowrap">data-effect</td>
                <td>string</td>
                <td>random</td>
                <td>Global effect for actors, can be random, top, bottom, left, right</td>
            </tr>
            <tr>
                <td>duration</td>
                <td style="white-space: nowrap">data-duration</td>
                <td>int</td>
                <td>1000</td>
                <td>Global actor effect duration (msec)</td>
            </tr>
            <tr>
                <td>timeout</td>
                <td style="white-space: nowrap">data-timeout</td>
                <td>int</td>
                <td>2000</td>
                <td>Global timeout before actor effect (msec)</td>
            </tr>
            <tr>
                <td>sceneTimeout</td>
                <td style="white-space: nowrap">data-scene-timeout</td>
                <td>int</td>
                <td>2000</td>
                <td>Timeout before scene is closed</td>
            </tr>
            <tr>
                <td>easing</td>
                <td style="white-space: nowrap">data-easing</td>
                <td>string</td>
                <td>swing</td>
                <td>Easing function for effect</td>
            </tr>
            </tbody>
        </table>

        <h3>Actor Options</h3>
        <table class="table bordered border">
            <thead>
            <tr>
                <td>Parameter</td>
                <td>Data-*</td>
                <td>Type</td>
                <td>Default value</td>
                <td>Description</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>effect</td>
                <td style="white-space: nowrap">data-effect</td>
                <td>string</td>
                <td>undefined</td>
                <td>Global effect for actors, can be random, top, bottom, left, right</td>
            </tr>
            <tr>
                <td>duration</td>
                <td style="white-space: nowrap">data-duration</td>
                <td>int</td>
                <td>undefined</td>
                <td>Global actor effect duration (msec)</td>
            </tr>
            <tr>
                <td>timeout</td>
                <td style="white-space: nowrap">data-timeout</td>
                <td>int</td>
                <td>undefined</td>
                <td>Global timeout before actor effect (msec)</td>
            </tr>
            <tr>
                <td>easing</td>
                <td style="white-space: nowrap">data-easing</td>
                <td>string</td>
                <td>undefined</td>
                <td>Easing function for effect</td>
            </tr>
            </tbody>
        </table>

        <p class="padding10 bg-grayLighter">
            For easing functions look <a href="easing.html">this page</a>
        </p>
    </div>

    @@hit

</body>
</html>